<template>
	<div class="me-container rq-me">
		<view class="me1">
			<view class="me1a">
				<view class="me1aimg">
					<image class="img" src="../../static/image/me/mety.png"></image>
				</view>
				<view>27℃</view>
			</view>
		</view>
		<div class="user-info me2">
			<image class="portrait me2a" :src="user.portrait"></image>
			<view class="me2b">
				<view class="me2b1">
					<view class="me2b1a" @click="showUserInfo">
						{{ user.displayName }} <i class="icon-ion-ios-arrow-right"></i>
					</view>
					<view class="me2b1b">地球号：19950110</view>
				</view>
				<view class="me2b2">
					<view class="me2b2img" @click="iserweima=true">
						<image class="img" src="../../static/image/me/erweima.png"></image>
					</view>
				</view>
			</view>
			<view style="clear: both;"></view>
		</div>
		<view class="me3">
			<view class="me3a">
				<view class="me3a1">经常访问</view>
				<view class="me3a2">更多　<i class="icon-ion-ios-arrow-right"></i></view>
			</view>
			<view class="me3b">
				<view class="me3bitem" v-for="(item,index) in jcfw" :key="index">
					<view class="me3b1">
						<image class="img" :src="item.pic"></image>
					</view>
					<view class="me3b2">{{item.name}}</view>
				</view>
				<view style="clear: both;"></view>
			</view>
		</view>
		<div class="discovery-container me4">
			<div class="item" @click="showConferencePortal">
				<text>收藏</text>
				<i class="icon-ion-ios-arrow-right"></i>
			</div>
			<view class="rq-hine2"></view>
			<div class="item" @click="showDevGuide">
				<text>动态</text>
				<view class="me4b2">
					235　<i class="icon-ion-ios-arrow-right"></i>
				</view>
			</div>
			<view class="rq-hine2"></view>
			<view class="me4c">
				<view class="me4citem" v-for="(item,index) in zt" :key="index">
					<view class="me4c1">
						<image class="img" :src="item.pic"></image>
					</view>
				</view>
				<view style="clear: both;"></view>
			</view>
		</div>
		<div class="discovery-container me5">
			<block v-for="(item,index) in gn" :key="index">
				<view class="rq-hine2" v-if="index > 0"></view>
				<div class="item" >
					<image :src="item.pic" ></image>
					<text>{{item.name}}</text>
				</div>
			</block>
			<view class="rq-hine2"></view>
			<div class="item" @click="logout">
				<image src="/static/image/me/tc.png" ></image>
				<text>退出</text>
			</div>
		</div>

<!-- 		<div class="about" @click="showAbout">
			<text>关于</text>
		</div>
		<div class="about" @click="showApiTest">
			<text>API测试</text>
		</div>
		<div>
			<text>
				{{ info }}
			</text>
		</div> -->
		<!-- <button class="logout-button" @click="logout">退出登录</button> -->
		<view style="height: 100px; width: 100%;"></view>
		<view class="rq-tc" v-if="iserweima">
			<view class="tz"  @click="iserweima = false"></view>
			<view class="tc">
				<view class="tca" @click="iserweima = false"></view>
				<view class="tcb">
					<view class="tcb1">我的二维码</view>
					<image @click="onshare" class="tcb2" src="/static/image/icon/anniu1.png"></image>
				</view>
				<view class="tcc">
					<image class="tcc1" src="/static/image/icon/150px.png"></image>
				</view>
				<view class="tcd">幼稚鬼</view>
				<view class="tce">江苏 徐州</view>
				<view class="tcf">
					<image class="tcf1" src="/static/image/icon/xemw.png"></image>
				</view>
				<view class="tcg">扫一扫上面的二维码图案，加我地球岛</view>
				<view class="tch">保存到手机</view>
			</view>
		</view>
	</div>

</template>

<script>
	import wfc from "../../wfc/client/wfc";
	import {
		clear
	} from "../util/storageHelper";
	import store from "../../store";
	import avengineKit from "../../wfc/av/engine/avengineKit";
	import Config from "../../config";

	export default {
		name: "MePage",
		data() {
			return {
				iserweima: false,
				user: store.state.contact.selfUserInfo,
				info: '',
				jcfw: [{
					name: "可爱萌宠",
					pic: "../../static/image/me/tx1.png"
				}, {
					name: "可爱萌宠猫",
					pic: "../../static/image/me/tx2.png"
				}, {
					name: "可爱萌宠",
					pic: "../../static/image/me/tx3.png"
				}, {
					name: "可爱萌宠猫",
					pic: "../../static/image/me/tx4.png"
				}, {
					name: "可爱萌宠",
					pic: "../../static/image/me/tx5.png"
				}],
				gn: [{
					name: "服务",
					pic: "../../static/image/me/fw.png"
				}, {
					name: "好物分享",
					pic: "../../static/image/me/hwfx.png"
				}, {
					name: "设置",
					pic: "../../static/image/me/sz.png"
				}],
				zt: [{
					pic: "../../static/image/me/tx100.png"
				}, {
					pic: "../../static/image/me/tx100.png"
				}, {
					pic: "../../static/image/me/tx100.png"
				}]
			}
		},
		mounted() {
			if (avengineKit.isAVEngineKitEnable()) {
				if (avengineKit.isSupportConference()) {
					this.info += '高级版音视频\n'
				} else {
					this.info += '多人版音视频\n'
					Config.ICE_SERVERS.forEach(obj => {
						this.info += obj.uri + ' ' + obj.userName + ' ' + obj.password;
					})
				}
			}
		},
		methods: {
			onshare() {
				//shareContent
				store.shareContent()
			},
			showUserInfo() {
				store.setCurrentFriend(this.user)
				uni.navigateTo({
					url: '/pages/contact/UserDetailPage',
					success: () => {
						console.log('nav to UserDetailPage success');

					},
					fail: (err) => {
						console.log('nav to UserDetailPage err', err);
					}
				})

			},
			logout() {
				wfc.disconnect(true, false);
				clear();
				uni.reLaunch({
					url: '/pages/login/login'
				});
			},
			showAbout() {
				uni.navigateTo({
					url: '/pages/misc/WebViewPage?url=https://wildfirechat.cn/',
					fail: (e) => {
						console.log(e)
					}
				});
			},
			showApiTest() {
				uni.navigateTo({
					url: '/pages/misc/ApiTestPage',
					fail: (e) => {
						console.log(e)
					}
				});

			},
		}
	}
</script>

<style lang="scss" scoped>
	.img {
		width: 100%;
		height: 100%;
	}

	.rq-me {
		margin-top: 100rpx;
		.me5{
			padding: 0 15px;
			margin-bottom: 10px;
		}
		.me4 {
			padding: 0 15px;
			margin-bottom: 10px;

			.me4c {
				padding: 15px 0;

				.me4citem {
					width: 33%;
					float: left;
					display: flex;
					justify-content: space-between;
					flex-direction: column;
					align-items: center;

					.me4c1 {
						width: 106px;
						height: 160px;
						border-radius: 10px;
						overflow: hidden;
					}
				}
			}

			.me4b2 {
				font-size: 16px;
				color: #000000;
			}
		}

		.me3 {
			width: 100%;
			background-color: #ffffff;
			padding: 15px;
			margin-bottom: 10px;

			.me3b {
				padding: 15px 0 5px;

				.me3bitem {
					float: left;
					width: 20%;
					display: flex;
					justify-content: space-between;
					flex-direction: column;
					align-items: center;

					.me3b1 {
						width: 40px;
						height: 40px;
						border-radius: 8px;
						overflow: hidden;
					}

					.me3b2 {
						width: 50px;
						font-size: 12px;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
					}
				}
			}

			.me3a {
				display: flex;
				justify-content: space-between;
				width: 100%;
				align-items: center;

				.me3a1 {
					font-size: 14px;
				}

				.me3a2 {
					font-size: 12px;
					color: #999999;
				}
			}
		}

		.me2 {
			padding-bottom: 30px;

			.me2a {
				float: left;
			}

			.me2b {
				float: right;
				margin-left: 15px;
				width: calc(100% - 75px);
				display: flex;
				justify-content: space-between;
				align-items: center;
				height: 60px;

				.me2b1 {
					display: flex;
					justify-content: space-between;
					flex-direction: column;
					width: 100%;
					height: 60px;
					line-height: 30px;

					.me2b1a {
						font-size: 18px;
						color: #000000;

						i {
							margin-left: 10px;
						}
					}

					.me2b1b {
						font-size: 12px;
						color: #969698;
					}
				}

				.me2b2 {
					.me2b2img {
						width: 24px;
						height: 24px;
					}
				}
			}
		}

		.me1 {
			width: 100%;
			display: flex;
			justify-content: flex-end;
			background-color: #ffffff;
			padding: 0 15px;
			font-size: 14px;

			.me1a {
				display: flex;
				align-items: center;

				.me1aimg {
					width: 23px;
					height: 23px;
					margin-right: 10px;
				}
			}
		}
	}

	.me-container {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 100%;
		height: auto;
		background: #fafafa;
	}

	.user-info {
		width: 100%;
		padding: 15px;
		height: 90px;
		background: white;
		margin-bottom: 10px;
	}

	.user-info:active {
		background: #d6d6d6;
	}

	.user-info .portrait {
		width: 60px;
		height: 60px;
		border-radius: 8px;
	}

	.about {
		width: 100%;
		padding: 15px 10px;
		background: white;
	}

	.about:active {
		background: #d6d6d6;
	}

	.discovery-container {
		width: 100%;
		background-color: #ffffff;
	}

	.logout-button {
		margin-top: 20px;
		width: 120px;
		height: 48px;
	}

	.item {
		padding: 10px 10px;
		margin: 0px 0;
		display: flex;
		align-items: center;
	}

	.item image {
		max-width: 26px;
		max-height: 26px;
		margin-right: 16px;
		border-radius:5px ;
		overflow: hidden;
	}

	.item text {
		flex: 1;
	}

	.item i {
		color: #C0C0C1;
	}

	.item:active {
		background: #d6d6d6;
	}
</style>